<!DOCTYPE html>
<html>
<head>
	<title>nth-graph jQuery plugin test</title>
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="../lib/jquery.nth-graph.js"></script>
	<script type="text/javascript" src="../lib/jquery.testplugin.js"></script>
	<script type="text/javascript">
	// <![CDATA[	
	$(document).ready(function() {
		$(".example1").nthGraph(
				{ "cg":{"graph":{"version":"0.03"}  
				, "nodes":[
							  {"name":"start"}
							, {"ele":"#a1", "type":"in", "input":{"event":{"keyup":"traverse"}}}
							, {"ele":"#b1", "type":"in", "input":{"event":{"keyup":"traverse"}}}
							, {"ele":"#sum", "type":"out", "output":{"event":{"change":"immediately"}, "type":"text"}}
							, {"name":"calc"
								, "process":"function() {"+
														"  this.sum = this.a1 + this.b1;"+
														"}"
							}
							, {"name":"stop"}
				  ]
				, "edges":[
							  {"from":0, "to":4, "type":"trans"}
							, {"from":4, "to":1, "type":"get", "name":"a1"}
							, {"from":4, "to":2, "type":"get", "name":"b1"}
							, {"from":4, "to":5, "type":"trans"}
							, {"from":4, "to":3, "type":"set", "name":"sum"}
				  ]
			}, 
			"cgref": "../../additional/example_graphs/ins_and_outs.cg.json"
		});
		$(".example2").nthGraph(
				{ "cg":{"graph":{"version":"0.03"}  
				, "nodes":[
							  {"name":"start"}
							, {"ele":"#a2", "type":"in", "input":{"event":{"change":"traverse", "keyup":"traverse"}, "enforce":{"type":"number"}}}
							, {"ele":"#b2", "type":"in", "input":{"keyup":{"change":"traverse"}, "enforce":{"type":"number"}}}
							, {"ele":"#sum", "type":"out", "output":{"event":{"change":"immediately"}, "type":"text"}}
							, {"name":"calc"
								, "process":"function() {"+
														"  this.sum = this.a2 + this.b2;"+
														"}"
							}
							, {"name":"stop"}
				  ]
				, "edges":[
							  {"from":0, "to":4, "type":"trans"}
							, {"from":4, "to":1, "type":"get", "name":"a2"}
							, {"from":4, "to":2, "type":"get", "name":"b2"}
							, {"from":4, "to":5, "type":"trans"}
							, {"from":4, "to":3, "type":"set", "name":"sum"}
				  ]
				}, 
			"cgref": "../../additional/example_graphs/ins_and_outs.cg.json",
			"debug":function(msg){
				//if(window.console) {
     		//	console.debug(msg);
  			//} else {
     		//	alert(msg);
     		//}
			}
		});
		$(".example3").nthGraph(
				{ "cg":{"graph":{"version":"0.03"}  
				, "nodes":[
							  {"name":"start"}
							, {"ele":"#a3", "type":"in", "input":{"event":{"keyup":"traverse"}}}
							, {"ele":"#b3", "type":"in", "input":{"event":{"keyup":"traverse"}}}
							, {"ele":"#c3", "type":"in", "input":{"event":{"keyup":"traverse"}}}
							, {"ele":"#sum", "type":"out", "output":{"event":{"change":"immediately"}, "type":"text"}}
							, {"name":"calc"
								, "process":"function() {"+
														"  this.sum = this.a3 + this.b3 + this.c3;"+
														"}"
							}
							, {"name":"stop"}
				  ]
				, "edges":[
							  {"from":0, "to":5, "type":"trans"}
							, {"from":5, "to":1, "type":"get", "name":"a3", "enforce":{"type":"number"}}
							, {"from":5, "to":2, "type":"get", "name":"b3", "enforce":{"type":"number"}}
							, {"from":5, "to":3, "type":"get", "name":"c3", "enforce":{"type":"number"}}
							, {"from":5, "to":6, "type":"trans"}
							, {"from":5, "to":4, "type":"set", "name":"sum"}
				  ]
			}
		});
	
	});
	
	// ]]>
	</script>
</head>
<body>
<div class="example1" style="background:#ccd"> 
<h1>Simple Math</h1>
</div>
<div class="example1" style="background:#ccd"> <h2>a + b = ab ?</h2>
<p>Opps, that is concatination, not addition.</p>
<input type="text" name="a1" id="a1" value="4" /> + 
<input type="text" name="b1" id="b1" value="2" />
 = <span id="sum" >?</span>
</div>
<div class="example2" style="background:#ccd"> <h2>a + b = c !</h2>
<p>Now that is addition, because the inputs "enforce" the type to be a number, and not a string.</p>
<input type="text" name="a2" id="a2" value="2" /> + 
<input type="text" name="b2" id="b2" value="2" />
 = <span id="sum" >?</span>
</div>
<div class="example3" style="background:#ccd"> <h2>a + b = c !</h2>
<p>This is also addition, in this case the "get" edges "enforce" the type to be a number, and try to convert any strings.</p>
<input type="text" name="a3" id="a3" value="1" /> + 
<input type="text" name="b3" id="b3" value="2" /> + 
<input type="text" name="c3" id="c3" value="3" />
 = <span id="sum" >?</span>
</div>
</body>
</html>